<template>
  <div class="list" list>
    <ul class="con list-2">
      <li v-for="(item, index) in viewData" :key="index">
        <div class="photo-img">
          <a href="javascript: void(0)" class="photo photo-big" @click="$router.push('/articleDetails/'+item.viewPointId)">
            <img :src="item.imgUrl" alt="理投师">
          </a>
        </div>
        <div class="info fr">
          <a href="javascript: void(0)" class="title ftz18" @click="$router.push('/articleDetails/'+item.viewPointId)">{{item.title}}</a>
          <a href="javascript: void(0)" class="txt">
            {{item.summary}}
          </a>
          <div class="tips">
            <span class="photo"><img :src="item.avatar"></span>
            <span class="color-red">{{item.author}}</span>
            <span class="line"></span>
            <span class="color-red">{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            <span class="line"></span>
            <span class="color-red">分类：{{item.classifyName}}</span>
            <span class="fr m4">
              <a class="mr16" href="javascript:void(0)" share>
                <i class="icon icon-share"></i>分享</a>
              <a @click="updateCollectList(item)" class="mr16" href="javascript:void(0)" collet>
                <i class="icon icon-collet" :class="{'on': item.isCollect === 1}"></i>
                <span>{{item.isCollect === 1?'取消': ''}}收藏</span>
              </a>
              <a @click="updateCollectPraise(item)" href="javascript:void(0)" praise>
                <i :title="item.isPraise === 1?'取消点赞':'点赞'" class="icon icon-praise" :class="{'on': item.isPraise === 1}"></i>{{item.praise}}</a>
            </span>
          </div>
        </div>
      </li>
    </ul>
    <button v-if="total > viewData.length" class="load-more ftz16" @click="loadMore">
      <template v-if="loading">
        <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
        <span>正在加载，请稍候......</span>
      </template>
      <span v-else>点击加载更多...</span>
    </button>
    <button class="load-more ftz16" v-if="total===viewData.length">数据已经全部加载</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import * as api from '@/service/api'
export default {
  data () {
    return {
      viewData: [],
      total: null,
      searchData: {
        pageNum: 1,
        pageSize: 10
      },
      loading: false
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    ...mapState({
      me: state => state.me
    })
  },
  created () {
    this.getCollectList()
  },
  methods: {
    loadMore () {
      this.searchData.pageNum = this.searchData.pageNum + 1
      this.getCollectList()
    },
    async getCollectList () {
      this.loading = true
      let res = await api.getCollectList({ ...this.searchData })
      if (this.searchData.pageNum === 1) {
        this.viewData = res.data.list
      } else {
        this.viewData = this.viewData.concat(res.data.list)
      }
      this.total = res.data.total
      this.loading = false
    },
    async updateCollectList (item) {
      let status = item.isCollect === 1 ? 0 : 1
      await api.updateCollectList({
        collectId: item.viewPointId,
        isCollect: status
      })
      window.layer.msg('操作成功')
      this.searchData.pageNum = 1
      this.getCollectList()
    },
    async updateCollectPraise (item) {
      let status = item.isPraise === 1 ? 0 : 1
      await api.updateCollectPraise({
        viewPointId: item.viewPointId,
        isPraise: status
      })
      window.layer.msg('操作成功')
      this.searchData.pageNum = 1
      this.getCollectList()
    }
  }
}
</script>
<style lang="scss">
</style>
